<template>
	<div class="root">
		<div class="basicInfo">
			<div style="flex: 1.5;">
				<span>
				  赛事名称：
				  <b>{{ MatchSign.com_name }}</b>
				</span>
				<span>
				  裁判长：
				  <b>{{ MatchSign.referee_name }}</b>
				</span>
			</div>
			<div>
				<el-button type="warning" @click="back" size="small" class="copy-btn-MoreDisplay">返回</el-button>
			</div>
		</div>
		<div class="editor">
			<Uediter :value="ueditor.value" :config="ueditor.config" ref="ue"></Uediter>
			<div class="button" v-if="$route.query.flag != 5">
				<el-button type="primary" :loading="subLoading" @click="subRules">提交</el-button>
			</div>
		</div>
	</div>
</template>

<script>
	import Uediter from "@/components/UE/UE.vue";
	export default{
		data(){
			return{
				MatchSign:[],
				ueditor: {
				  value: "",
				  config: {
				    initialFrameWidth: 1000,
				    initialFrameHeight: 500
				  }
				},
				subLoading:false,
				hasContent:false,//是否已经有竞赛规程
			}
		},
		components: {
		  Uediter
		},
		created() {
			this.getCompeInfo()
			setTimeout(()=>{
				this.initRules()
			},1000)
		},
		methods:{
			// 返回上一级
			back(){
				this.$router.back()
			},
			// 修改规程
			editRules(){
				this.subLoading = true
				let rules = this.$refs.ue.getUEContent()
				console.log(rules)
				this.$axios.post(
				'/ComInfo/edit_rule',
				{
					content:rules,
					com_id:this.$route.query.MatchId,
				},
				{
					headers: {
						token: window.sessionStorage.getItem("token")
					}
				})
				.then(res=>{
					console.log(res)
					this.subLoading = false
					if (res.data.code ==2000) {
						this.$message({
							message: res.data.msg,
							type: 'success'
						});
					} else{
						this.$message({
							message: res.data.msg,
							type: 'error'
						});
					}
				})
				.catch(err=>{
					console.log(err)
				})
			},
			// 初始化规程
			initRules(){
				let rules = this.$refs.ue.getUEContent()
				this.$axios.post(
					'ComInfo/get_rule',
					{
						com_id:this.$route.query.MatchId
					},
					{
						headers: {
							token: window.sessionStorage.getItem("token")
						}
					})
					.then(res=>{
						console.log(res)
						if (res.data.code ==2000) {
							this.hasContent = true
							this.ueditor.value = res.data.data.content
							var ue = UE.getEditor("editor");
							ue.setContent(this.ueditor.value);
						} else{
							this.$message({
								message: res.data.msg,
								type: 'error'
							});
						}
					})
					.catch(err=>{
						console.log(err)
					})
			},
			// 提交规程
			subRules(){
				if(this.hasContent){
					this.editRules()
					return
				}
				this.subLoading = true
				let rules = this.$refs.ue.getUEContent()
				console.log(rules)
				this.$axios.post(
				'/ComInfo/add_rule',
				{
					content:rules,
					com_id:this.$route.query.MatchId,
				},
				{
					headers: {
						token: window.sessionStorage.getItem("token")
					}
				})
				.then(res=>{
					console.log(res)
					this.subLoading = false
					if (res.data.code ==2000) {
						this.$message({
							message: res.data.msg,
							type: 'success'
						});
					} else{
						this.$message({
							message: res.data.msg,
							type: 'error'
						});
					}
				})
				.catch(err=>{
					console.log(err)
				})
			},
			// 初始化赛事信息
			getCompeInfo() {
			  this.$axios
			    .get('/competition/getCompeInfo', {
			      params: {
			        com_id: this.$route.query.MatchId
			      },
			      headers: {
			        token: window.sessionStorage.getItem('token')
			      }
			    })
			    .then(res => {
			      if (res.data.code) {
			        this.MatchSign = res.data.data;
			      }
			    })
			    .catch(res => {
			      console.log(res);
			    });
			},
		}
	}
</script>

<style scoped lang="less">
.root{
	.basicInfo {
		background: linear-gradient(90deg, rgba(66, 185, 131, 0.2), rgba(66, 185, 131, 0.4));
		border-radius: 2px;
		line-height: 30px;
		height: 30px;
		padding: 15px;
		margin: 10px 50px;
		overflow: hidden;
		display: flex;
		justify-content: space-around;
		align-items: center;
		span {
			margin-right: 20px;
		}
		.btnGroup {
			margin-right: 20px;
		}
		.date {
			width: 25%;
			padding: 10px 15px;
		}
	}
	.editor{
		width: 1000px;
		margin: 50px;
	}
	.button{
		margin-top: 10px;
	}
}
</style>
